<template>
	<div class="content">
		<!--<HeaderMsg></HeaderMsg>-->
		<mt-header title="学情诊断" class="nav">
		</mt-header>
		<!--2018-1-23 按顾总要求目前不予展示雷达图-->
		<!--<div class="banner">
			<p class="title">学科掌握度总览</p>
			<div id="myChart" :style="{width: '6.4rem', height: '6.4rem'}"></div>
		</div>-->
		<div class="detail">
			<!--<p class="title">学科掌握度详情</p>-->
			<div class="inBox">
				<div  v-for="x in subjectDataArr" @click="chooseSubject(x)" >
					<div class="left" :class="getClass(x.coursename)">
						<span></span>						
					</div>
					<div class="right">
						
					<div class="top">
						<span :class="getClass(x.coursename)">{{ x.coursename }}</span>
						<div>
							<div class="yellow" :class="getClass(x.coursename)" :style="{width:x.value+'%'}"></div>
							
						</div>
					</div>
					<div class="bottom">
						<p>课堂出题数：{{ x.key1 }}&nbsp;&nbsp;&nbsp;答题正确率：{{ x.value }}%</p>						
					</div>
					</div>
				</div>
			</div>
		</div>
		<FooterMsg></FooterMsg>
	</div>
</template>

<script>
	import FooterMsg from '../../components/FooterMsg'
	import HeaderMsg from '../../components/Header'
	import api from '../../api'
	import { mapState, mapMutations } from 'vuex'
	import $ from 'jquery'
	import { Indicator,Toast } from 'mint-ui';
	let echarts = require('echarts/lib/echarts')
	// 引入柱状图组件
	require('echarts/lib/chart/radar')
	// 引入提示框和title组件
	require('echarts/lib/component/tooltip')
	require('echarts/lib/component/title')
	export default {
		components: {
			FooterMsg,
			HeaderMsg
		},
		data() {
			return {
				subjectList:[
					{coursename:'数学',courseid:'13',value:0},
					{coursename:'语文',courseid:'12',value:0},
					{coursename:'英语',courseid:'14',value:0},
					{coursename:'物理',courseid:'15',value:0},
					{coursename:'化学',courseid:'16',value:0},
					{coursename:'生物',courseid:'17',value:0},
					{coursename:'政治',courseid:'11',value:0},
					{coursename:'历史',courseid:'18',value:0},
					{coursename:'地理',courseid:'19',value:0}
				],
				subjectDataArr:[],
				indicator:[],
				masterData: [{
						percent: 75,
						knowledge: '函数'
					},
					{
						percent: 15,
						knowledge: '函数'
					},
					{
						percent: 25,
						knowledge: '函数'
					},
					{
						percent: 35,
						knowledge: '函数'
					},
					{
						percent: 45,
						knowledge: '函数'
					},
					{
						percent: 55,
						knowledge: '函数'
					}
				]
			}
		},
		activated(){
			
		},
		created(){
			this.INIT_STATE();
			var that=this;
			$(function(){
			var h =document.body.clientHeight;
  			$('.content').css('min-height', h-49-36+'px')			
			})
			api.getStudyDiagInfo({
				classid:this.userlogin.classid,
				studentid:this.userlogin.uid
			}).then(response=>{
				Indicator.close();
				var arr=response.data.data;
				console.log(arr)
				that.subjectList.forEach(function(v,i){
					var obj=arr.find(function(item){
						return item.coursename==v.coursename
					})
					if(!obj){
						that.subjectDataArr.push(v)
					}else{
						v.value=parseInt(obj.key3)<=1?parseInt(obj.key3)*100:parseInt(obj.key3)
						that.subjectDataArr.push(Object.assign(obj,v))
					}
				})
				this.subjectDataArr.sort(function(a,b){
					return b.value-a.value
				})
				this.subjectDataArr.forEach(function(v,i){
					that.indicator.push({
						name:v.name,
						max:100
					})
				})
//				this.drawLine()	
			})
			
		},
		mounted() {
//			this.drawLine()
			Indicator.open({
				text: 'Loading...',
  				spinnerType: 'triple-bounce'
			});
		},
		computed:{
			...mapState(['userlogin'])
		},
		methods: {
			...mapMutations(['INIT_STATE']),
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = echarts.init(document.getElementById('myChart'))
				// 绘制图表
				myChart.setOption({
					title: {
						text: '',
						textStyle:{fontWeight:'normal',fontSize:'28px'}
					},
					tooltip: {
						show:false
					},
					grid:{
						top:'60%'
					},
					radar: {
						// shape: 'circle',
						name: {
							textStyle: {
								color: '#3c3c3c',
								borderRadius: 3,
								padding: [2, 2]
							}
						},
						axisLine:{
						lineStyle:{
							type:'dashed'
						}
						},
						splitArea:{
							areaStyle:{
								color:'rgba(255,255,255,1)'
							}
						},
						indicator: this.indicator
					},
					axisLabel:{
						padding:0,
						inside:true
					},
					scale:true,
					series: [{
						name: '科目掌握度',
						type: 'radar',
						itemStyle: {normal: {color:'rgba(255,170,96,1)'}},
						// areaStyle: {normal: {}},
						data: [{
								value: this.subjectDataArr.map(function(x){return x.value}),
								name: '各科目数值'
						}],
						
							lineStyle:{
								color:'rgba(255,170,96,1)'
							},
							areaStyle:{
								normal:{
									color:'rgba(255,170,96,1)'
								}
							}
					}]
				});
			},
			chooseSubject(x){
				var _subjectID=this.transSubject(this.userlogin.gradename+x.coursename)
				if(_subjectID!=0){
				this.$router.push({path:`/studydiagCodedetail/${_subjectID}/${x.courseid}/${x.coursename}`})
					
				}else{
					Toast('您暂无相关课程');
				}
			},
			transSubject(s){
				switch (s){
					case '初中语文':
						return 1;
					case '初中数学':
						return 2;
					case '初中英语':
						return 3;
					case '初中物理':
						return 4;
					case '初中化学':
						return 5;
					case '初中生物':
						return 6;
					case '初中政治':
						return 7;
					case '初中历史':
						return 8;
					case '初中地理':
						return 9;
					case '高中语文':
						return 10;
					case '高中数学':
						return 11;
					case '高中英语':
						return 12;
					case '高中物理':
						return 13;
					case '高中化学':
						return 14;
					case '高中生物':
						return 15;
					case '高中政治':
						return 16;
					case '高中历史':
						return 17;
					case '高中地理':
						return 18;
					case '小学语文':
						return 19;
					case '小学数学':
						return 20;
					case '小学英语':
						return 21;
					default :
						return 0;
				}
			},
			getClass(courseName) {
				switch(courseName) {
					case '语文':
						return 'chinese';
					case '数学':
						return 'math';
					case '英语':
						return 'english';
					case '化学':
						return 'chemistry';
					case '生物':
						return 'biology';
					case '历史':
						return 'history';
					case '地理':
						return 'geography';
					case '物理':
						return 'physics';
					case '政治':
						return 'politics';
				}
			}
		}
	}
</script>

<style scoped>
	.nav {
		position: fixed;
		width: 100%;
		top: 0;
		background-color: #FA8C13;
		z-index: 2;
	}
	
	.banner {
		height: 6.4rem;
		width: 100%;
		font-size: 18px;
		margin: 0 auto;
		padding-top: 12px;
		background-color: white;
	}
	#myChart{
		margin: 0 auto;
	}
	.title {
		margin: 0;
		text-align: left;
		font-size: 15px;
		padding-left: 20px;
	}
	
	.content {
		overflow-y: scroll;
		padding-top: 36px;
	}
	.content .inBox{
		width: 100%;
		text-align: left;
	}
	.content .inBox>div:nth-of-type(1){
		margin-top: 10px;
	}
	.content .inBox>div {
		margin: 0 0.2rem;
		background: #FFFFFF;
		border-radius: 4px;
		height: 60px;
		width: calc(100% - 0.4rem);
		margin-top: 20px;
		padding-left: 10px;
		box-sizing: border-box;
	}
	.content .inBox>div>.left{
		display: inline-block;
		width: 0.88rem;
		height: 44px;
		background-size: contain;
		margin: 0 auto;
		position: relative;
		top: 4px;
		opacity: 0.8;
		border-radius: 44px;
		background-repeat: no-repeat;
		background-position: center;
		text-align: center;
	}
	.content .inBox>div>.right{
		display: inline-block;
		position: relative;
		height: 100%;
		padding-left: 0.54rem;
		
	}
	.content .inBox>div>.right>.top{
		margin-top: 9px;
		font-size:15px;
		position: relative;
	}
	.content .inBox>div>.right>.top span{
		background-color: transparent;
	}
	.content .inBox>div>.right>.top>div{
		width: 2.4rem;
		height: 12px;
		position: absolute;		
		background: #D8D8D8;
		top: 5px;
		left: 1.54rem;
		
		border-radius: 4px;
	}
	.content .inBox>div>.right>.top>div>.yellow{		
		border-radius: 4px;
		height: 100%;
		max-width: 100%;
	}
	.content .inBox>div>.right>.bottom{
		margin-top: 4px;
	}
	.content .inBox>div>div>span {
		display: inline-block;
		width: 24px;
		height: 24px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		margin: 10px auto;
	}
	
	.content .inBox>div>div.chinese {
		background-image: linear-gradient(-141deg, #DFFAFF 0%, #9BEFFA 97%);
		box-shadow: 0 7px 15px 0 rgba(172, 245, 255, 0.70);
	}
	div.chinese>span {
		background-image: url(../../assets/images/chinese.png);
	}
	
	.content .inBox>div>div.math {
		background-image: linear-gradient(-141deg, #F2F7D9 0%, #FCE758 97%);
		box-shadow: 0 7px 15px 0 #FFECAC;
	}
	
	div.math>span {
		background-image: url(../../assets/images/math.png);
	}
	
	.content .inBox>div>div.english {
		background-image: linear-gradient(-141deg, #FAEBF0 0%, #FFB3C3 97%);
		box-shadow: 0 7px 15px 0 rgba(248, 174, 189, 0.70);
	}
	
	div.english>span {
		background-image: url(../../assets/images/english.png);
	}
	
	.content .inBox>div>div.chemistry {
		background-image: linear-gradient(-141deg, #DBFBD6 0%, #A2F697 97%, #9BEFFA 97%);
		box-shadow: 0 7px 15px 0 rgba(144, 245, 127, 0.70);
	}
	
	div.chemistry>span {
		background-image: url(../../assets/images/chemistry.png);
	}
	
	.content .inBox>div>div.biology {
		background-image: linear-gradient(-141deg, #FFEFF1 0%, #F5C7C7 97%);
		box-shadow: 0 7px 15px 0 rgba(248, 195, 190, 0.70);
	}
	
	div.biology>span {
		background-image: url(../../assets/images/biology.png);
	}
	
	.content .inBox>div>div.history {
		background-image: linear-gradient(-141deg, #E3E3FF 0%, #BEB6FF 97%);
		box-shadow: 0 7px 15px 0 rgba(191, 186, 254, 0.70);
	}
	
	div.history>span {
		background-image: url(../../assets/images/history.png);
	}
	
	.content .inBox>div>div.geography {
		background-image: linear-gradient(-141deg, #FFF4DF 0%, #FADE9B 97%);
		box-shadow: 0 7px 15px 0 rgba(255, 218, 172, 0.70);
	}
	
	div.geography>span {
		background-image: url(../../assets/images/geography.png);
	}
	
	.content .inBox>div>div.physics {
		background-image: linear-gradient(-141deg, #F8F2FC 0%, #E7B5FF 97%);
		box-shadow: 0 7px 15px 0 #EFCFFF;
	}
	
	div.physics>span {
		background-image: url(../../assets/images/physics.png);
	}
	
	.content .inBox>div>div.politics {
		background-image: linear-gradient(-141deg, #FFDFFA 0%, #FFBFEC 97%);
		box-shadow: 0 7px 15px 0 rgba(255, 172, 233, 0.70);
	}
	
	div.politics>span {
		background-image: url(../../assets/images/politics.png);
	}
	
	.chinese {
		color: #0CD5F9;
		background-color: #0CD5F9;
	}
	
	.math {
		color: #FF9E03;
		background-color: #FF9E03;
	}
	
	.english {
		color: #FF356B;
		background-color: #FF356B;
	}
	
	.biology {
		color: #E44100;
		background-color: #E44100;
	}
	
	.chemistry {
		color: #00EC00;
		background-color: #00EC00;
	}
	
	.history {
		color: #7150F7;
		background-color: #7150F7;
	}
	
	.geography {
		color: #F97A0C;
		background-color: #F97A0C;
	}
	
	.physics {
		color: #72138B;
		background-color: #72138B;
	}
	
	.politics {
		color: #F90CED;
		background-color: #F90CED;
	}
	.content .inBox>div>div>.knowledge {
		width: 72%;
		font-size: 15px;
		color: #3C3C3C;
		text-align: left;
		text-indent: 16px;
		line-height: 20px;
		margin-top: 10px;
	}
	.content .inBox>div>div>.knowledge>p{
		margin: 0;
	}
	.content .inBox>div>div>.knowledge>p:nth-of-type(2){
		font-size: 12px;
		color: #999999;
	}
	.content .inBox>div>div>.exercise {
		width: 5%;
		font-size: 16px;
		text-align: center;
		height: 44px;
		line-height: 44px;
		text-align: center;
		position: relative;
		top: -13px;
		color: #999999;
	}
	.detail{
		/*margin-top: 10px;*/
		background-color: #f2f2f2;
		/*padding-top: 12px;*/
	}
</style>